<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            type="text/javascript"
            src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"
    ></script>

</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
</body>
<script>
    // 初始化地图
    var map = new BMapGL.Map("container")
    // 准备一个中心点（经度和纬度）
    var point = new BMapGL.Point(116.404, 39.915);
    //鼠标滚轮播放
    map.enableScrollWheelZoom(true);
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
    var point = new BMapGL.Point(116.404, 39.915);
    var marker = new BMapGL.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(116.399, 39.910),
        new BMapGL.Point(116.405, 39.920),
        new BMapGL.Point(116.425, 39.900)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polyline);
    var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polygon);

</script>
<script>
    // 初始化地图
    var map = new BMapGL.Map("container");
    // 准备一个中心店（经度和纬度）
    // var point = new BMapGL.Point(116.404, 39.915);
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心店和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮播放
    map.enableScrollWheelZoom(true);
    //添加一个点
    var marker = new BMapGL.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中

    //存储多个点
    var line = [];
    //存储标记
    var markers = [];
    //监听事件
    map.addEventListener("click", (e) => {
        //创建点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        //创建标记
        var m = new BMapGL.Marker(p);
        markers.push(m);
        //添加标记
        map.addOverlay(m);
        // console.log(e);
        //存储点
        line.push(p);
    });
    map.addEventListener("dblclick", (e) => {
        //把第0个点放入到最后面
        line.push(line[0]);
        //创建多边形
        var polyline = new BMapGL.Polyline(line, {
            strokeColor: "blue",
            strokeStyle: "dashed",
            strokeWeight: 2,
            strokeOpacity: 0.5,
            enableEditing: "true",
        });
        //添加线
        map.addOverlay(polyline);
        //清空点的列表
        line = [];
        //
        markers.forEach((item) => {
            map.removeOverlay(item);
        });
        //清空点
        markers = [];
    });
</script>

</html>
